import { Component } from 'react';

import { Boxs,Button  } from 'saltui';
import { weidaoshijian, shijianyidao } from '../../../app/variables';
const { HBox, Box } = Boxs;

export default class Page extends Component {
  constructor(props) {
    super(props);
    this.state = {
        days:'0天',
        hours:'00',
        minutes:'00',
        seconds:'00',
        isShow:false,
        daysShow:false,
        beforeStart:false,
        beforeStartTimeDown:false,
        timeOver:false,
        isRed:false
    }
  }

  componentDidMount() {
    let startDate = this.props.startDate;
    if(startDate != null) startDate = startDate.replace(/\-/g, "/");//IOS对时间字符串需要处理,"-"替换成"/"
    let endDate = this.props.endDate;
    if(endDate != null) endDate = endDate.replace(/\-/g, "/");//IOS对时间字符串需要处理,"-"替换成"/"
    let isShow = false;
    let beforeStart = false;
    let timeOver = false;
    var nowDate = new Date();
    //有结束时间
    if(endDate != null && endDate != ''){
      var enDate = new Date(endDate);
      //结束时间大于当前时间
      if(enDate > nowDate){
        //有开始时间
        if(startDate != null && startDate != ''){
          isShow = true;
          var staDate = new Date(startDate);
          //开始时间小于当前时间
	    	  if(staDate < nowDate){
            if(endDate != null && endDate != '') {
              this.countFun(endDate, 'end');
            }
          }else{
            beforeStart = true;
            //开始前倒计时
            this.countFun(startDate, 'start', ()=>{
              beforeStart = false;
              this.setState({
                beforeStart:beforeStart
              },()=>{
                this.countFun(endDate, 'end');
              })
            });
          }
        }else{
          isShow = true;
          this.countFun(endDate, 'end');
        }
      }else{
        timeOver = true;
      }
    }else{//没有结束时间
      //有开始时间
      if(startDate != null && startDate != ''){
        var staDate = new Date(startDate);
        //开始时间大于当前时间
        if(staDate > nowDate){
          isShow = true;
          beforeStart = true;
          //开始前倒计时
          this.countFun(startDate, 'start');
        }
      }
    }
    this.setState({
      isShow:isShow,
      beforeStart:beforeStart,
      timeOver:timeOver
    })
  }
      
  //卸载组件取消倒计时
  componentWillUnmount(){
    clearInterval(this.myInterval);
  }

  //倒计时
  countFun(dateStr, type, callback){
    let t = this;
    t.myInterval = setInterval(function(){
      //结束时间
      let endDate = new Date(dateStr);
      //当前时间
      let nowDate = new Date();
      //相差的总秒数
      let totalSeconds = parseInt((endDate - nowDate) / 1000);
      //天数
      let days = Math.floor(totalSeconds / (60 * 60 * 24));
      //取模（余数）
      let modulo = totalSeconds % (60 * 60 * 24);
      //小时数
      let hours = Math.floor(modulo / (60 * 60));
      modulo = modulo % (60 * 60);
      //分钟
      let minutes = Math.floor(modulo / 60);
      //秒
      let seconds = modulo % 60;

      let beforeStartTimeDown = false;
      let daysShow = false;
      let timeOver = false;
      let isShow = true;
      let isRed = false;
      if(type == 'start' && totalSeconds < 86400){//小于一天，才开始倒计时
        beforeStartTimeDown = true;
        if(totalSeconds <= 0) {
          t.props.showChange(true);
          clearInterval(t.myInterval);
          if(callback) callback();
          else isShow = false;
        }
        t.setState({
          hours: t.doubleDigit(hours),
          minutes: t.doubleDigit(minutes),
          seconds: t.doubleDigit(seconds),
          beforeStartTimeDown:beforeStartTimeDown,
          isShow:isShow
        })
      }else if(type == 'end'){
        if(days >= 1) daysShow = true;
        else {
          if(totalSeconds <= 300) isRed = true;
          daysShow = false;
        }
        if(totalSeconds <= 0) {
          timeOver = true;
          t.props.showChange(false);
          clearInterval(t.myInterval);
        }
        t.setState({
          daysShow:daysShow,
          timeOver:timeOver,
          isRed:isRed,
          days: days + '天',
          hours: t.doubleDigit(hours),
          minutes: t.doubleDigit(minutes),
          seconds: t.doubleDigit(seconds),
        })
      }
    }, 1000);
  }

  doubleDigit(val){
    return val > 9 ? val : "0" + val;
  }

  examSubmit(){
    this.props.examSubmit();
  }

  render() {
    let t = this;
    return (
      <div className={t.state.isShow ? "t-H36" : ""}>
      {t.state.isShow ? 
        t.state.beforeStart ?
        <div className="t-PL16 t-PR16 t-LH1_4 dd-BCf">
          <h1 className="t-FS18 t-FAC t-PT26 t-FC3 t-PB16"><b>{t.props.title}</b></h1>
          <Box className="t-OFH" style={{width:"100",margin:"auto",marginTop:"60"}}>
            <img src={weidaoshijian} width="100" ></img>
          </Box>
          <Box className="t-FC3 t-FS14 t-FAC" style={{marginTop:"30"}}>{'抱歉，此问卷将于 ' + t.props.startDate.substring(0, 16) + ' 开放！'}</Box>
          <Box className={t.state.beforeStartTimeDown ? "t-FC3 t-FS16 t-FAC" : "t-DN"} style={{marginTop:"20"}}>考试倒计时</Box>
          <HBox vAlign="center" className={t.state.beforeStartTimeDown ? "t-JCC" : "t-DN"} style={{marginTop:"14"}}>
            <Box className="t-BCorange t-LH2 t-R2 t-FCf t-WH30 t-FS16 t-FAC">{t.state.hours}</Box>
            <Box className="t-ML8 t-MR8 t-FC9">:</Box>
            <Box className="t-BCorange t-LH2 t-R2 t-FCf t-WH30 t-FS16 t-FAC">{t.state.minutes}</Box>
            <Box className="t-ML8 t-MR8 t-FC9">:</Box>
            <Box className="t-BCorange t-LH2 t-R2 t-FCf t-WH30 t-FS16 t-FAC">{t.state.seconds}</Box>
          </HBox>
        </div>
        : t.state.timeOver ? 
        <div className="t-PL16 t-PR16 t-LH1_4 dd-BCf">
          <h1 className="t-FS18 t-FAC t-PT26 t-FC3 t-PB16"><b>{t.props.title}</b></h1>
          <Box className="t-OFH" style={{width:"100",margin:"auto",marginTop:"60"}}>
            <img src={shijianyidao} width="100" ></img>
          </Box>
          <Box className="t-FS16 t-FC3 t-FAC" style={{marginTop:"30",marginBottom:"20"}}>您的作答时间已到，请直接提交问卷！</Box>
          <Box className="t-FAC"><Button type="primary" display="inline" onClick={t.examSubmit.bind(this)}>提交</Button></Box>
        </div>
        :
        <HBox className="t-LH2_6 t-FS14 t-FAC" style={{background:"#feeded", justifyContent: "center", position:"fixed", top:0, right:0,left:0,zIndex:99}} vAlign="center">
          <Box>剩余作答时间:&nbsp;</Box>
            <Box className={t.state.daysShow ? "" : "t-DN"}>{t.state.days}</Box>
            <Box className={t.state.daysShow ? "t-DN" : t.state.isRed ? "t-FCred" : ""}>{t.state.hours}</Box>
            <Box className={t.state.daysShow ? "t-DN" : t.state.isRed ? "t-FCred" : ""}>:&nbsp;</Box>
            <Box className={t.state.daysShow ? "t-DN" : t.state.isRed ? "t-FCred" : ""}>{t.state.minutes}</Box>
            <Box className={t.state.daysShow ? "t-DN" : t.state.isRed ? "t-FCred" : ""}>:&nbsp;</Box>
            <Box className={t.state.daysShow ? "t-DN" : t.state.isRed ? "t-FCred" : ""}>{t.state.seconds}</Box>
        </HBox>
        :
        ""
      }
      </div>
    );
  }
}



